<!DOCTYPE html>
<!-- 
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.1.1
Version: 2.0.2
Author: KeenThemes
Website: http://www.keenthemes.com/
Contact: support@keenthemes.com
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
-->
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<!--<![endif]-->
<!-- BEGIN HEAD -->
<!-- BEGIN BODY -->
<body class="page-header-fixed">
<!-- BEGIN CONTAINER -->
	<!-- BEGIN CONTENT -->
		<!--表格操作按钮组-->
		<div class="tabbable tabbable-custom boxless">
			<ul class="nav nav-tabs">
				<li class="active">
					<!--<a href="#bootbox" data-toggle="tab">TAB1</a>-->
					<a data-toggle="tab">TAB1</a>
				</li>
				<li>
					<a data-toggle="tab">TAB2</a>
				</li>
			</ul>
			<div class="tab-content"></dvi>
		</div>
		<div class="table_btn_box">
			<!--参数：this必填项；subjectModel1弹出框ID；test1点击修改框执行的代码-->
			<a class="btn blue" onClick="tableAdd(this,'subjectModel1');"><i class="fa fa-plus"></i>新增</a>
			<a class="btn blue" onClick="tableSet(this,'subjectModel1','test1');"><i class="fa fa-pencil"></i>修改</a>
			<a class="btn blue" onClick="tableDel(this,'subjectModel1','test1');"><i class="fa fa-trash-o"></i>删除</a>
			<a class="btn blue" onClick="tableSon(this,'subjectModel2','initSonTables');"><i class="fa fa-list"></i>子列表调配</a>
			<a class="btn blue"><i class="fa fa-sign-in"></i>导入</a>
			<a class="btn blue"><i class="fa fa-sign-out"></i>导出</a>
		</div>
		<!--表格头部刷选条件-->
		<hr />
		<div class="form-group" style="margin: 0px;">
			<div class="row">
				<div class="col-sm-3">
					<label class="col-sm-3 control-label text-right">输入框</label>
					<div class="col-sm-9"><input type="text" class="form-control"/></div>
				</div>
				<div class="col-sm-3">
					<label class="col-sm-3 control-label text-right">下拉</label>
					<div class="col-sm-9">
						<div class="input-group">
							<select class="form-control">
								<option>系统管理员</option>
							</select>
						</div>
					</div>
				</div>
				<div class="col-sm-1"><a class="btn blue"><i class="fa fa-search"></i>查询</a></div>
			</div>
		</div>
		<hr />
		<table class="table table-striped table-bordered table-hover" id="table_1">
			<thead>
				<tr>
					<th class="table-checkbox">
						<input type="checkbox" class="checkbox_table" />
					</th>
					<th>ID</th>
					<th>名字</th>
					<th>编号</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr class="odd gradeX">
					<td>
						<input type="checkbox" class="checkboxes" value="1" />
					</td>
					<td>1</td>
					<td>new名字</td>
					<td>1201352345235</td>
					<td><a class="btn">修改</a></td>
				</tr>
			</tbody>
		</table>
<div id="subjectModel1" class="modal fade" role="dialog" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title">新增数据混合布局</h4>
			</div>
			<form action="#" method="post" id="addData">
			<div class="modal-body form">
				<div class="form-group">
					<div class="row">
						<label class="col-sm-2 control-label text-right">名称</label>
						<div class="col-sm-10">
							<div class="input-group"><input type="text" class="form-control"/></div>
						</div>
					</div>
					<div class="row">
						<label class="col-sm-2 control-label text-right">角色</label>
						<div class="col-sm-10">
							<div class="input-group">
								<select class="form-control">
									<option>系统管理员</option>
								</select>
							</div>
						</div>
					</div>
					<div class="row">
						<label class="col-sm-2 control-label text-right">状态</label>
						<div class="col-sm-4">
							<div class="checkbox-list">
								<label class="checkbox-inline"><input type="checkbox" value="1" checked>启用</label>
								<label class="checkbox-inline"><input type="checkbox" value="1">禁用</label>
							</div>
						</div>
						<label class="col-sm-2 control-label text-right">状态</label>
						<div class="col-md-4">
							<div class="radio-list">
								<label class="radio-inline"><input type="radio" name="optionsRadios" value="1" checked>启用</label>
								<label class="radio-inline"><input type="radio" name="optionsRadios" value="2">启用</label>
							</div>
						</div>
					</div>
					<hr />
					<div class="row">
						<div class="col-sm-6 text-center">
							<div class="show_img" id="showPortrait4Box">
	                            <img src="/manageView/assets/img/logo.png">
	                        </div>
	                        <label class="system_btn">上传新头像<input type="file" name="portrait" class="hide input_portrait" onchange="previewImage(this,'showPortrait4Box')"/></label>
						</div>
						<div class="col-sm-6 text-center">
							<div class="show_img" id="showPortrait5Box">
	                            <img src="/manageView/assets/img/logo.png">
	                        </div>
	                        <label class="system_btn">上传新头像<input type="file" name="portrait" class="hide input_portrait" onchange="previewImage(this,'showPortrait5Box')"/></label>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i>关闭</button>
				<button type="submit" class="btn btn-primary"><i class="fa fa-check"></i>保存</button>
			</div>
			</form>
		</div>
	</div>
</div>
<div id="subjectModel2" class="modal fade" role="dialog" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title">新增数据混合布局</h4>
			</div>
			<div class="modal-body form">
				<div class="form-group">
					<div class="table_btn_box">
						<!--参数：this必填项；subjectModel1弹出框ID；test1点击修改框执行的代码-->
						<a class="btn blue" onClick="tableAdd(this,'subjectModel3');"><i class="fa fa-plus"></i>新增</a>
						<a class="btn blue" onClick="tableSet(this,'subjectModel3','test1');"><i class="fa fa-pencil"></i>修改</a>
						<a class="btn blue" onClick="tableDel(this,'subjectModel3','test1');"><i class="fa fa-trash-o"></i>删除</a>
					</div>
					<table class="table table-striped table-bordered table-hover" id="table_2">
						<thead>
							<tr>
								<th class="table-checkbox">
									<input type="checkbox" class="checkbox_table" />
								</th>
								<th>ID</th>
								<th>名字</th>
								<th>编号</th>
							</tr>
						</thead>
					</table>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i>关闭</button>
				<button type="button" class="btn btn-primary"><i class="fa fa-check"></i>保存</button>
			</div>
		</div>
	</div>
</div>
<div id="subjectModel3" class="modal fade" role="dialog" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title">子列表修改</h4>
			</div>
			<div class="modal-body form">
				<div class="form-group">
					<div class="row">
						<label class="col-sm-2 control-label text-right">名称</label>
						<div class="col-sm-10">
							<div class="input-group"><input type="text" class="form-control"/></div>
						</div>
					</div>
					<div class="row">
						<label class="col-sm-2 control-label text-right">角色</label>
						<div class="col-sm-10">
							<div class="input-group">
								<select class="form-control">
									<option>系统管理员</option>
								</select>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i>关闭</button>
				<button type="button" class="btn btn-primary"><i class="fa fa-check"></i>保存</button>
			</div>
		</div>
	</div>
</div>
	<!-- END CONTENT -->
<!-- END CONTAINER -->
<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- BEGIN CORE PLUGINS -->
</body>
<!-- END BODY -->
</html>
<script src="manageView/assets/scripts/public.js" type="text/javascript"></script>
<script>
//表格配置在util.js中 new一个新的可以避免多个表格被污染
var tablesOption1 = new datatablesFunc();
//表格中数据
tablesOption1.data = [
	['<input type="checkbox" value="1" />',1,'name1','123132132142336546','<a class="btn">修改</a>'],
	['<input type="checkbox" value="2" />',2,'name2','567457645674567','<a class="btn">修改</a>']
];
var table1 = $('#table_1');
var tb1 = table1.DataTable(tablesOption1);
table1.bTableAll();//表格复选框全选全不选事件绑定
//table1.bGetTableCheckeds();//返回表格中被选中的IDs如：1,2,3,4
//tb1.rows().remove().draw(false);//删除datatable中数据
//tb1.rows.add(tablesOption1.data).draw();//新增datatable数据

//修改前执行的 代码
function test1(_id){
	console.log('执行代码		id='+_id);
}
function initSonTables(_id){
	var tablesOption2 = new datatablesFunc();
		//表格中数据
		tablesOption2.data = [
			['<input type="checkbox" value="1" />',1,'name3','123132132142336546123132132142336546123132132142336546123132132142336546'],
			['<input type="checkbox" value="2" />',2,'name4','567457645674567']
		];
		tablesOption2.iDisplayLength = 5;
	var table2 = $('#table_2');
	var tb2 = table2.DataTable(tablesOption2);
	table2.bTableAll();
}
</script>